<template>
  <div class="content-card">
    <div class="title">
      <a-icon type="tags"></a-icon>
      <span>{{ "目录资源挂接情况" }}</span>
    </div>
    <div class="body">
      <div id="dir-editing__chart1"></div>
    </div>
  </div>
</template>

<script>
import API from "@/api/directories";
export default {
  name: "i4-chart",
  props: {},
    data() {
      return {
          ygjzyml: [],
          wgjzyml: [],
          xdata: [],
          ydata1: [],
          ydata2: []
      }
    },
  methods: {
    registerAndSetCharts1() {
      let charts1Ref = this.$echarts.init(
        document.getElementById("dir-editing__chart1")
      );
      let option1 = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          top: "5%",
        },
        grid: {
          left: "5%",
          bottom: "10%",
          top: "25%",
          containLabel: true,
        },
        yAxis: {
          name: "个",
          type: "value",
          boundaryGap: [0, 0.1],
          axisLine: {
            show: true,
            lineStyle: {
              color: "#777",
            },
          },
        },
        xAxis: {
          type: "category",
          data: this.xdata,
          axisTick: {
            show: false,
          },
        },
          dataZoom: [
              {
                  id: 'dataZoomX',
                  type: 'slider',
                  show: true,
                  xAxisIndex: [1],
                  filterMode: 'filter'
              },{
                  type: 'inside',// 内置于坐标系中
                  start: 0,
                  end: 30,
                  xAxisIndex: [0]
              },
          ],
        series: [
          {
            name: "已挂结",
            type: "bar",
            barWidth: 10,

            data: this.ydata1,
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#7F68FF" },
              { offset: 1, color: "#BFB3FF" },
            ]),
          },
          {
            name: "未挂结",
            type: "bar",
            barWidth: 10,

            data: this.ydata2,
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#3191FF" },
              { offset: 1, color: "#70BDFF" },
            ]),
          },
        ],
      };
      charts1Ref.setOption(option1);
    },
      getTask() {
          let handleV12 = (res) => (this.changedata(res.data.body.data));

          API.getBox1_v12().then(handleV12);



      },
      changedata(da) {
          console.log(da);
          for(let item in da){
              this.xdata.push(da[item].DEPT_NAME);
              this.ydata1.push(da[item].gjsl);
              this.ydata2.push(da[item].wgjsl)
          }
          console.log(this.ydata2)
          this.registerAndSetCharts1();
      }
  },
  mounted() {

      this.timer = setInterval(this.getTask(), 30000); // 设置周期触发任务

  },
};
</script>

<style lang="less" scoped>
.content-card {
  height: 100%;
  .title {
    display: flex;
    align-items: center;
    padding: 10px 0;
    background: linear-gradient(to right, #dee9ff, #ffffff);
    i {
      color: #6989c6;
      margin: 0 15px;
      font-size: 18px;
    }
    span {
      font-size: 16px;
      font-weight: 500;
    }
  }
  .body {
    width: 100%;
    height: 300px;
    :first-child {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
